<template>
  <div class="container" v-if="showInput">
    <div class="image-input-wrapper">
      <input
        type="file"
        accept="image/*"
        @change="handleFileChange"
        ref="imageInput"
      />
    </div>
    <button @click="chooseImage">{{ buttonText}}</button>
  </div>
</template>  
    
  <script setup>
import { ref } from "vue";

const showInput = ref(false); // 控制图片选择框的显示与隐藏
const imageFile = ref(''); // 存储选择的图片文件
const imageInput = ref(null) 
const buttonText = ref('选择图片')

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    imageFile.value = file; // 保存选择的文件
  }
  buttonText.value = '请按下Ctrl+Enter确认选择图片'
};

function chooseImage(){
    imageInput.value.click();
}

//展示输入框
function show() {
  showInput.value = showInput.value ? false : true;
}

defineExpose({
  imageFile,
  show,
  showInput
});
</script>  
    
  <style scoped>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器占据整个视口高度 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #fff;
  width: 16rem;
  height: 2.5rem;
  border-radius: 10px;
}

.image-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px; /* 与上方的按钮保持一定间距 */
}

input[type="file"] {
  display: none; /* 隐藏文件输入框 */
}
</style>